<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="/static-media/blue/style.css"/>
        <link rel="stylesheet" type="text/css" href="/static-media/jquery.jqplot.min.css" />
        <script type="text/javascript" src="/static-media/jquery-1.4.2.min.js"></script> 
        <script type="text/javascript" src="/static-media/jquery.tablesorter.min.js"></script> 
        <script> 
            $(document).ready(function() {

	//When page loads...
	$(".content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
</script>
        <title> DTPS Students - {{ title }}</title>
        <style type="text/css">


            body{
                font:0.75em/1.7em Verdana,Arial,Geneva,Helvetica,sans-serif;
                margin:0px;
                padding:0px;
                background-color: #EDEBE8;
                line-height: 1.48em;

            }

            #header {
                font-family: Helvetica,Arial,sans-serif;
                margin:0px;
                padding:0px;
                background-color:black;
                /*border-bottom: solid #009bff 2px;*/
                height:70px;
                color:#d8d8d8;
            }

            #header a:visited, #header a, #header a:hover {
                text-decoration:none;
                color:#d8d8d8;

            }
            #header a:hover {
                color:#f8f8f8;
            }
            ul.tabs {
                margin: 0;
                padding: 0;
                float: left;
                list-style: none;
                height: 32px; /*--Set height of tabs--*/
                border-bottom: 1px solid #999;
                border-left: 1px solid #999;
                width: 100%;
            }

                ul.tabs li {
                    float: left;
                    margin: 0;
                    padding: 0;
                    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
                    line-height: 31px; /*--Vertically aligns the text within the tab--*/
                    border: 1px solid #999;
                    border-left: none;
                    margin-bottom: -1px; /*--Pull the list item down 1px--*/
                    overflow: hidden;
                    position: relative;
                    background: #e0e0e0;
                }
                ul.tabs li a {
                    text-decoration: none;
                    color: #000;
                    display: block;
            /*        font-size: 1.2em; */
                    font-weight:bold;
                    padding: 0 20px;
                    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
                    outline: none;
                }
                ul.tabs li a:hover {
                    background: #ccc;
                }
                html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
                    background: #fff;
                    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
                }

.month-container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.content {
	padding: 20px;
/*	font-size: 1.2em;*/
}



                .logo {
                    position:relative;
                    font-weight:bold;
                    left:20px;
                    top:40px;
                    font-size:1.8em;
                }
                .nav {
                    left:40px;
                    position:relative;
                    top:40px;
                    display:inline;
                    padding-left:20px;
                }

                .nav li {
                    padding-left:20px;
                    font-size:1.33em;
                    font-family: Helvetica,Arial,sans-serif;
                    font-weight:bold;
                    display:inline;
                }

                .search {
                    border:none;
                    display:inline;
                    width:200px;
                float:right;
                top:27px;
                right:20px;
                position:relative;

            }
            .amsearch {
                margin-left:10px;
                margin-right:10px;
                width:90px;
                height:25px;
                font-size:1.22em;
                border: solid 2px #c8c8c8;
                text-align:center;
            }
            .links{
                width:200px;
            }

            .amsubmit {
                height:30px;
                font-weight:bold;
            }

            label {
                position:relative;
                bottom:-2px;
                font-size:1.33em;
                color: #d8d8d8;
                font-weight:bold;
            }
            #main {
                padding:30px;
            }


            td.date{
                width:80px;
            }
            span.date{
                display:none;
            }
            p {
                display:block;
            }

            h4 {
                margin-top: 30px;
                margin-bottom:10px;
            }


        </style>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-2765475-5']);
            _gaq.push(['_trackPageview']);

            (function() {
             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
             })();
         </script>

         <script type="text/javascript">
             $(document).ready(function() 
                     { 
                     $("#maintable").tablesorter({sortList: [[0,1]], widgets:['zebra']}); 
                     $("#maintable1").tablesorter({sortList: [[0,1]], widgets:['zebra']}); 
                     $("#maintable2").tablesorter({sortList: [[0,1]], widgets:['zebra']}); 
                     } 
                     ); 
             </script>

             {% block verification %} {% endblock %}

         </head>

         <body>

             <div id="header">
                 <a href="/" class="logo"> dtps students</a>
                 <ul class="nav">
                     <li><a  href="/">Home</a></li>
                     <li><a href="/faq">FAQ</a></li>
                 </ul>
                 <fieldset class="search">
                     <form action="student" name="grades" method="get">
                         <label>
                             AM
                         </label>
                         <input class="amsearch" type="text" name="sid" /> 
                         <input class="amsubmit" type="submit" value="Go!" />
                     </form>
                 </fieldset>

             </div>
             <div id="main">
                 <h3>{{ title }}</h3>
                 {% block results %} {% endblock %}
             </div>

         </body>
     </html>
